<template>
  <div class="login-bg">
    <div class="login-wrapp">
      <div class="login-box">
        <div class="login-title">用户登录</div>
        <el-form :model="loginForm" ref="formValid">
          <el-form-item prop="username" :rules="userRule">
            <el-input
              v-model="loginForm.username"
              placeholder="用户名/邮箱/手机号"
              autocomplete="off"
              prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" :rules="pwRule">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="账户密码"
              show-password
              prefix-icon="el-icon-lock"
            ></el-input>
          </el-form-item>
          <el-form-item prop="code" :rules="codeRule">
            <el-input
              style="width: 64%"
              v-model="loginForm.code"
              placeholder="验证码"
              prefix-icon="el-icon-key"
              @keyup.enter.native="login"
            ></el-input>
            <div class="login-code">
              <img @click="refeshCode" :src="codeUrl">
            </div>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="loginDisabled" type="primary" @click="login" class="submit-button">{{ loginDisabled ? '登陆中。。。' : '登陆'}}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <footer>
      {{ footerTxt }} · <a href="http://www.beian.miit.gov.cn" style="color: #fff;" target="_blank">{{ caseNumber }}</a>
    </footer>
  </div>
</template>

<script>
import { footerTxt, caseNumber } from '@/settings'
import { mapActions } from 'vuex'
import { encrypt } from '@/utils/rsaEncrypt'
import { code } from '@/api/sys/auth'
export default {
  name: 'login',
  data() {
    return {
      loginForm: {
        username: process.env.NODE_ENV === 'production' ? '' : 'wangsh',
        password: process.env.NODE_ENV === 'production' ? '' : 'wangsh'
      },
      userRule: { required: true, message: '请输入账号', trigger: 'blur' },
      pwRule: { required: true, message: '请输入密码', trigger: 'blur' },
      codeRule: process.env.NODE_ENV === 'production' ? { required: true, message: '请输入有效验证码', trigger: 'blur' } : { },
      codeUrl: '',
      loginDisabled: false,
      footerTxt,
      caseNumber
    }
  },
  mounted() {
    this.refeshCode()
  },
  methods: {
    ...mapActions('user', ['userLogin']),
    login() {
      this.$refs['formValid'].validate(async (valid) => {
        if (valid) {
          this.loginDisabled = true
          const form = JSON.parse(JSON.stringify(this.loginForm))
          form.password = encrypt(form.password)
          await this.userLogin(form)
            .then((res) => {
              const { state, obj } = res
              if (state) {
                this.$notify({
                  dangerouslyUseHTMLString: true,
                  message: `登陆成功`,
                  type: 'success'
                })
                this.$router.push('/layout')
              } else {
                this.$notify({
                  title: '失败',
                  message: `${obj}`,
                  type: 'error'
                })
                this.refeshCode()
              }
              this.loginDisabled = false
            })
        }
      })
    },
    refeshCode() {
      code(this.loginForm).then((res) => {
        this.codeUrl = res.img
        this.loginForm.uuid = res.uuid
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .login-bg
    display flex
    justify-content center
    align-items center
    background-image url(/bg.jpg)
    height 100%
    background-size: cover;
    .login-wrapp
      background rgba(255, 255, 255, 0.9)
      padding 0 30px
      .login-box
        width 300px
        margin 30px auto
        .login-title
          text-align center
          padding-bottom 20px
          margin-bottom 20px
          border-bottom 1px solid #fff
        .submit-button
          width 100%
        .login-code
          width 33%
          display inline-block
          float right
          img
            width 100%
            vertical-align middle
    footer
      position fixed
      bottom 0
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-family: Arial,serif;
      font-size: 12px;
      letter-spacing: 1px;
</style>
